<template>
  <el-dialog
    :title="'学生列表 - ' + courseName"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="800px"
    custom-class="student-list-dialog"
  >
    <div class="student-list-container">
      <div class="table-header">
        <div class="header-left">
          <el-tag type="primary" effect="dark" class="total-tag">
            <i class="el-icon-user"></i>
            <span class="total-count">共 {{totalPage}} 名学生</span>
          </el-tag>
        </div>
      </div>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        element-loading-text="正在加载..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        :row-class-name="tableRowClassName"
        style="width: 100%">
        <el-table-column
          prop="xuehao"
          header-align="center"
          align="center"
          label="学号">
          <template slot-scope="scope">
            <div class="student-id-box">
              <i class="el-icon-school"></i>
              <span class="student-id">{{scope.row.xuehao}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="xueshengxingming"
          header-align="center"
          align="center"
          label="姓名">
          <template slot-scope="scope">
            <div class="student-name-box">
              <i class="el-icon-user"></i>
              <span class="student-name">{{scope.row.xueshengxingming}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="banji"
          header-align="center"
          align="center"
          label="班级">
          <template slot-scope="scope">
            <el-tag 
              :type="getTagType(scope.$index)" 
              effect="light" 
              class="class-tag">
              {{scope.row.banji}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="xuankeriqi"
          header-align="center"
          align="center"
          label="选课日期">
          <template slot-scope="scope">
            <div class="date-box">
              <i class="el-icon-date"></i>
              <span class="date-text">{{scope.row.xuankeriqi}}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        class="pagination-container">
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      courseName: '',
      courseId: '',
      banji: '',
      tagTypes: ['success', 'warning', 'danger', 'info', 'primary']
    }
  },
  methods: {
    init(id, name, banji) {
      this.courseId = id
      this.courseName = name
      this.banji = banji
      this.visible = true
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      // 获取选课学生列表
      this.$http.get(`kechengxinxi2/students/${encodeURIComponent(this.courseName)}/${encodeURIComponent(this.banji)}`, {
        params: {
          page: this.pageIndex,
          limit: this.pageSize
        }
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.list
          this.totalPage = data.total
        } else {
          this.$message.error(data.msg || '获取数据失败')
        }
        this.dataListLoading = false
      }).catch(error => {
        console.error('获取学生列表失败:', error)
        this.$message.error('获取学生列表失败')
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 获取标签类型
    getTagType(index) {
      return this.tagTypes[index % this.tagTypes.length]
    },
    // 表格行的类名
    tableRowClassName({row, rowIndex}) {
      return rowIndex % 2 === 0 ? 'even-row' : 'odd-row'
    }
  }
}
</script>

<style scoped>
.student-list-dialog {
  border-radius: 8px;
}

.student-list-container {
  padding: 0 10px;
}

.table-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
}

.total-tag {
  padding: 8px 15px;
  border-radius: 20px;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.total-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.total-tag i {
  margin-right: 0;
  font-size: 16px;
}

.total-count {
  font-size: 14px;
  color: #fff;
  margin: 0;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.student-id-box,
.student-name-box,
.date-box {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.student-id-box i,
.student-name-box i,
.date-box i {
  margin-right: 5px;
  font-size: 16px;
  opacity: 0.7;
}

.student-id {
  color: #409EFF;
  font-weight: 500;
}

.student-name {
  color: #303133;
  font-weight: 500;
}

.date-text {
  color: #606266;
}

.class-tag {
  transition: all 0.3s;
  cursor: default;
}

.class-tag:hover {
  transform: scale(1.05);
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 表格样式优化 */
.el-table {
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  transition: all 0.3s;
}

.el-table:hover {
  box-shadow: 0 4px 20px 0 rgba(0,0,0,0.08);
}

.el-table th {
  background-color: #f5f7fa !important;
  color: #303133;
  font-weight: 500;
  height: 50px;
}

.el-table td {
  padding: 12px 0;
}

.even-row {
  background-color: #fafafa;
}

.odd-row {
  background-color: #ffffff;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #ecf5ff !important;
}

/* 加载动画样式 */
.el-loading-spinner .el-loading-text {
  color: #409EFF;
  margin: 3px 0;
  font-size: 14px;
}

.el-loading-spinner .path {
  stroke: #409EFF;
}

/* 分页器样式 */
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #409EFF;
  color: #fff;
  transition: all 0.3s;
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #409EFF;
  transform: translateY(-1px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.el-table__row {
  animation: fadeIn 0.3s ease-out forwards;
}

.el-table__row:nth-child(1) { animation-delay: 0.1s; }
.el-table__row:nth-child(2) { animation-delay: 0.2s; }
.el-table__row:nth-child(3) { animation-delay: 0.3s; }
.el-table__row:nth-child(4) { animation-delay: 0.4s; }
.el-table__row:nth-child(5) { animation-delay: 0.5s; }
</style> 